<template>
  <div style="padding-top:100px">
    <div class="app-title-container title-position">
      <modules-title titleName="销毁申请详情">
        <template slot="btn">
          <el-button plain="" size="small" @click="handleBack">返回
          </el-button>
          <el-button type="primary " size="small"
                     v-if="formTable.reserve_sample_destroy.status === 2 && formTable.reserve_sample_destroy.destroy_user_id === userInfo"
                     @click="handleRecord">提交销毁记录
          </el-button>
          <el-button type="primary " size="small"
                     v-if="formTable.reserve_sample_destroy.status === 3 && formTable.reserve_sample_destroy.supervision_user_id === userInfo
             " @click="handleDetermine()">确定
          </el-button>
          <el-button type="primary" size="small" @click="handlUndo"
                     v-if="formTable.reserve_sample_destroy.destroy_check &&
              formTable.reserve_sample_destroy.destroy_check.Cancelable && boole">
            撤销
          </el-button>
          <el-button type="primary " size="small" v-if=" boole &&  formTable.reserve_sample_destroy.status === 6 "
                     @click="handlEdit()">编辑
          </el-button>
        </template>

      </modules-title>
    </div>
    <div style="padding:20px">
      <el-form size="small" label-position="left" :model="formTable" ref="formTable">
        <el-row :gutter="80">
          <el-col :span="8">
            <el-form-item label="当前状态：" label-width="100px">
              {{handlStatus(formTable.reserve_sample_destroy.status)}}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="销毁单据：" label-width="100px">
              {{formTable.reserve_sample_destroy.destroy_no}}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="创建人：" label-width="80px">
              {{formTable.reserve_sample_destroy.creator_name}}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="创建时间：" label-width="100px">
              <span v-if="formTable.reserve_sample_destroy.created_at">
                {{dateFormat1('yyyy-mm-dd ',formTable.reserve_sample_destroy.created_at)}}
              </span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="销毁人：" label-width="80px">
              {{formTable.reserve_sample_destroy.destroy_user_name}}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="监督人：" label-width="80px">
              {{formTable.reserve_sample_destroy.supervision_user_name}}
            </el-form-item>
          </el-col>
          <el-col :span="8"
                  v-if="formTable.reserve_sample_destroy.status !== 0
                  && formTable.reserve_sample_destroy.status !== 1">
            <el-form-item label="销毁日期：" label-width="100px"
                          prop="reserve_sample_destroy.destroy_time"
                          :rules="{ required: true, message: '请选择销毁日期', trigger: 'blur'}">
              <span v-if="formTable.reserve_sample_destroy.status !== 2">
                <span v-if="formTable.reserve_sample_destroy.destroy_time">
                  {{dateFormat1('yyyy-mm-dd ',formTable.reserve_sample_destroy.destroy_time)}}
                </span>
              </span>
              <el-date-picker v-else v-model="formTable.reserve_sample_destroy.destroy_time"
                              type="date" :picker-options="pickerOption1" placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :span="24"
                  v-if="formTable.reserve_sample_destroy.status !== 0
                  && formTable.reserve_sample_destroy.status !== 1">
            <el-form-item label="附件：" label-width="100px">
              <file-preview v-if="formTable.reserve_sample_destroy.status !== 2"
                            :file-list="formTable.reserve_sample_destroy.enclosure" :fileBtnOption="['preview']"/>
              <upload-select v-else ref="uploadEnclosure" :edit-list="formTable.reserve_sample_destroy.enclosure"/>

            </el-form-item>
          </el-col>
        </el-row>

        <item-title title="销毁明细" :borderShow="false"/>
        <el-table :data="formTable.sample_destroy_info" class="table1" @row-click="aloneClick"
                  :cell-style="cellStyle" border size="medium">
          <el-table-column prop="sample_info.name" label="样品名称" align="center"/>
          <el-table-column label="样品类别" align="center">
            <template #default="{row}">
              <span v-if="row.sample_info.sample_type_info">
                {{row.sample_info.sample_type_info.same_type_name	}}
              </span>
            </template>
          </el-table-column>
          <el-table-column label="批号" align="center">
            <template #default="{row}">
              <span v-if="row.sample_info"> {{handlBatch(row.sample_info.batch_info)}}</span>
            </template>
          </el-table-column>
          <!--          <el-table-column prop="sample_info.attr" label="规格" align="center"/>-->
          <el-table-column prop="project_name" label="所属项目" align="center"/>
          <el-table-column label="留样日期" align="center">
            <template #default="{row}">
              <span
                v-if="row.reserve_sample_time">{{dateFormat1('yyyy-mm-dd ',row.reserve_sample_time)}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="destroy_num" label="留样数量" align="center"/>
          <el-table-column prop="destroy_num" label="销毁数量" align="center"/>
          <el-table-column prop="reason" label="销毁原因" align="center"
                           :show-overflow-tooltip="true"/>
          <el-table-column label="销毁方式" align="center"
                           v-if="formTable.reserve_sample_destroy.status !== 0 && formTable.reserve_sample_destroy.status !== 1">
            <template slot-scope="scpoe">
              <span
                v-if="formTable.reserve_sample_destroy.status !== 2">{{scpoe.row.destroy_way}}</span>
              <el-form-item class="div_form" v-else
                            :prop="'sample_destroy_info.' + scpoe.$index + '.destroy_way'"
                            :rules="{ required: true, message: '请输入销毁方式', trigger: 'blur'}">
                <el-input v-model="scpoe.row.destroy_way" size="mini" @click.native.stop>
                </el-input>
              </el-form-item>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
    </div>

  </div>
</template>

<script>
  import {
    sampleDetail,
    sampleReport,
    sampleConfirm
  } from '@/api/sampleManagement'

  export default {
    name: 'apply',
    data() {
      return {
        value1: [],
        formTable: {
          reserve_sample_destroy: {
            enclosure: []
          },
          sample_destroy_info: []
        },
        options: [
          { value: -1, label: '全部' },
          { value: 0, label: '审批中' },
          { value: 1, label: '已拒绝' },
          { value: 2, label: '待销毁' },
          { value: 3, label: '销毁确认' },
          { value: 4, label: '已销毁' },
          { value: 5, label: '已撤销' },
          { value: 6, label: '已回退' }
        ],
        pickerOption1: {
          disabledDate(time) {
            //此条为设置禁止用户选择今天之前的日期，包含今天。
            return time.getTime() >= Date.now() - 8.64e6
          }
        },
        boole: false,
        userInfo: null

      }
    },
    //是计算属性，也可以理解为一个方法。
    computed: {
      handlStatus() {
        return function(val) {
          let a = ''
          this.options.forEach(element => {
            if (val === element.value) {
              a = element.label
            }
          })
          return a
        }
      },
      handlBatch() {
        return function(val) {
          let str = ''
          if (val) {
            for (let i = 0; i < val.length; i++) {
              str += val[i].sample_batch
              if (i !== val.length - 1) {
                str = str + '、'
              }
            }
          }
          return str
        }
      }
    },

    //属性是手动定义的所需监听的值
    watch: {},

    //生命周期 - 创建完成（访问当前this实例）
    created() {
      this.userInfo = this.$store.getters.userInfo.user.id
      this.handlSampleDetail()
    },

    //生命周期 - 挂载完成（访问DOM元素）
    mounted() {
    },

    //是Vue实例对象上绑定的方法，供当前Vue组件作用域内使用，
    methods: {
      //返回
      handleBack() {
        this.$route.params.refresh = true
        this.$router.go(-1)
      },

      //获取详情数据
      handlSampleDetail() {
        sampleDetail(this.$route.query.id).then(res => {
          if (res.code === 200) {
            this.formTable = res.data
            if (this.formTable.reserve_sample_destroy.destroy_check.check_creator_id == this.userInfo) {
              this.boole = true
            }
          }
        })
      },

      //查看详情
      aloneClick(row, column, event) {
        if (column.label === '销毁方式') return
        this.$router.push({
          path: '/sampleManagement/destruction/particular',
          query: { id: row.id }
        })
      },

      //鼠标huover
      cellStyle(data) {
        return 'cursor:pointer;'
      },

      //写销毁记录
      handleRecord() {
        this.$refs.formTable.validate(async valid => {
          if (valid) {
            let dataList1 = await this.$refs.uploadEnclosure.saveFile()
            this.formTable.reserve_sample_destroy.enclosure = dataList1[0]
            let arr = []
            this.formTable.sample_destroy_info.forEach(item => {
              arr.push({
                id: item.id,
                way: item.destroy_way
              })
            })
            let data = {
              id: this.formTable.reserve_sample_destroy.id,
              destroy_time: this.dateFormat1(
                'yyyy-mm-dd HH:MM:SS',
                this.formTable.reserve_sample_destroy.destroy_time
              ),
              enclosure: this.formTable.reserve_sample_destroy.enclosure,
              sample_info: arr
            }
            let res = await sampleReport(data)
            if (res.code === 200) {
              this.$message.success('销毁记录提交成功')
              this.handlSampleDetail()
              this.$router.params.refresh = true
              this.handleBack()
            }
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },

      handleDetermine() {
        sampleConfirm(this.$route.query.id).then(res => {
          if (res.code === 200) {
            this.$message.success('确定成功')
            this.handlSampleDetail()
            this.handleBack()
          }
        })
      },

      // 撤销
      handlUndo() {
        const subdata = {
          flow_id: this.formTable.reserve_sample_destroy.destroy_check.id,
          model_type: 'RetainDestroy'
        }
        this.$comFun.cancelFunc(subdata).then(() => {
          this.$message({
            type: 'success',
            message: '已撤销'
          })
          this.handlSampleDetail()
        }).catch(err => {
          this.$message.error(err)
        })
      },
      //编辑
      handlEdit(row) {
        this.$router.push({
          path: '/sampleManagement/destruction/create',
          query: { s_id: this.$route.query.id }
        })
      }
    }
  }
</script>

<style scoped>
  /* @import url(); 引入css类 */
  ::v-deep .table1 tr td:nth-child(9n) {
    padding: 0 !important;
    height: 48px !important;
    overflow: visible !important;
    line-height: 48px;
  }

  ::v-deep .table1 tr tdtd:nth-child(9n) .cell {
    height: 48px !important;
    overflow: visible !important;
    line-height: 48px;
    display: flex;
    align-items: center;
  }

  ::v-deep .div_form {
    margin: 0 !important;
  }

  ::v-deep .el-table {
    overflow: visible !important;
  }

  ::v-deep .el-table__body-wrapper {
    overflow: visible;
  }
</style>
